<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Spinner
    </ui:define>

    <ui:define name="description">
        Spinner is used to provide an input with increment and decrement buttons on an input text.
    </ui:define>

    <ui:param name="documentationLink" value="/components/spinner"/>
    <ui:param name="widgetLink" value="Spinner"/>

    <ui:define name="implementation">
        <div class="card">
            <h:form>
                <div class="ui-fluid formgrid grid">
                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Basic Spinner"/>
                        <p:spinner id="basic" value="#{spinnerView.number1}"/>
                    </div>

                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Step Factor"/>
                        <p:spinner id="step" value="#{spinnerView.number2}" stepFactor="0.25"/>
                    </div>

                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Min/Max"/>
                        <p:spinner id="minMax" value="#{spinnerView.number3}" min="0" max="100"/>
                    </div>

                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Rotate"/>
                        <p:spinner id="rotate" value="#{spinnerView.number6}" min="0" max="10" rotate="true"/>
                    </div>
                  
                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Rotate + No Wheel"/>
                        <p:spinner id="rotateNoWheel" value="#{spinnerView.number6}" min="0" max="10" rotate="true" modifyValueOnWheel="false"/>
                    </div>

                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Rounded"/>
                        <p:spinner id="rounded" value="#{spinnerView.number7}" min="0" max="55" stepFactor="5" round="true"/>
                    </div>

                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Prefix"/>
                        <p:spinner id="prefix" value="#{spinnerView.number4}" prefix="$" min="10" max="50"/>
                    </div>

                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Horizontal"/>
                        <p:spinner id="horizontal" value="#{spinnerView.number8}" buttons="horizontal" />
                    </div>

                    <div class="field col-12 md:col-4">
                        <p:outputLabel for="@next" value="Horizontal after"/>
                        <p:spinner id="horizontalAfter" value="#{spinnerView.number9}" buttons="horizontal-after" 
                                   upButtonStyleClass="ui-button-success" downButtonStyleClass="ui-button-danger"/>
                    </div>
                </div>

                <div class="ui-fluid formgrid grid">
                    <div class="field col-12 md:col-1">
                        <p:outputLabel for="@next" value="Vertical"/>
                        <p:spinner id="vertical" value="#{spinnerView.number10}" buttons="vertical"
                                   upButtonStyleClass="ui-button-secondary" downButtonStyleClass="ui-button-secondary"/>
                    </div>
                </div>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
